<template>
	<div class="question-footer">
		<div class="question-footer-left">
			<span class="question-footer-label">试题类型:</span>
			<div class="question-footer-content">{{typeMap[question.questionType]}}</div>
			<span class="question-footer-label">试题分数:</span>
			<el-input :value="score" maxlength="2"  @input="socreInput" v-if="canEditScore"></el-input>
			<div class="question-footer-content" v-else>
				<span class="main-color-font" >{{question.score}}</span>
				<span class="main-color-font">分</span>
			</div>
			
			<template v-if="showUserScore">
				<span class="question-footer-label">得分:</span>
				<span class="main-color-font">{{(question.userScore || question.userScore === 0)?question.userScore :0}}</span>
			</template>
		</div>
		<div class="question-footer-operate" v-if="showOperate">
			<el-button type="text" v-if="showMoveUp" @click="moveUp">上移</el-button>
			<el-button type="text"  v-if="showMoveDown" @click="moveDown">下移</el-button>
			<el-button type="text" @click="delQuestion" v-if="showDel">删除</el-button>
		</div>
	</div>
</template>

<script >
	import {typeMap} from "@/common/question.js";
	export default{
		name:"QuestionFooter",
		mounted() {
			console.log(this.question)
			this.score = this.question.score;
		},
		watch:{
			question(val){
				console.log(val)
				this.score = val.score;
			},
		},
		props:{
			question:{
				type:Object,
				require:true
			},
			qIndex:{
				type:Number
			},
			showOperate:{
				type:Boolean,
				default:true
			},
			showMoveUp:{
				type:Boolean,
				default:true
			},
			showMoveDown:{
				type:Boolean,
				default:true
			},
			showDel:{
				type:Boolean,
				default:true
			},
			canEditScore:{
				type:Boolean,
				default:true
			},
			showUserScore:{
				type:Boolean,
				default:false
			},
		},
		data(){
			return {
				typeMap:typeMap,
				score:""
			}
		},
		methods:{
			delQuestion(){
				this.$emit("delQuestion",this.question);
			},
			socreInput(val){
				this.score = val.replace(/[^\d]/g,'');
				this.question.score = this.score;
				this.$emit("scoreChange",this.score );
			},
			moveUp(){
				this.$emit("moveUp",this.question);
			},
			moveDown(){
				this.$emit("moveDown",this.question);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.question-footer{
		@include flex-row(space-between, center);
		width: 100%;
		height: 48px;
		padding: 0 24px;
		box-sizing: border-box;
		background: #FBFBFB;
		border-top: 1px solid #EBEEF6;
		
		.question-footer-left{
			@include flex-row(flex-start, center);
			.question-footer-label{
				font-weight: bold;
				margin-left: 48px;
			}
			.question-footer-label:first-child{
				margin-left: 0;
			}
			.question-footer-content{
				@include flex-row(flex-start, center);
				color: $mainColor;
				margin-left: 8px;
			}
			.el-input{
				width: 50px;
				color: $mainColor;
				margin-left: 8px;
				margin-right: 8px;
			}
		}
		.question-footer-operate{
			@include flex-row(flex-start, center);
		}
	}
</style>
